<%--
  Created by IntelliJ IDEA.
  User: 沐白
  Date: 2020/8/18
  Time: 19:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/toastr/toastr.min.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.0.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/Myjs.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .table > tbody > tr > td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<br>
<%--搜索员工 --%>
<div class="form-group">
    <div class="form-inline">
        <div class="form-group">
            <label>员工编号</label>
            <input type="text" class="form-control" id="staffId" placeholder="员工编号"/>
        </div>
        <div class="form-group">
            <label>员工姓名</label>
            <input type="text" class="form-control" id="staffName" placeholder="员工姓名"/>
        </div>
        <div class="form-group">
            <button id="shoubtn" class="btn btn-primary">搜索</button>
            <input type="button" data-toggle="modal" data-target="#xinzeng" class="btn btn-primary" value="新增员工"/>
        </div>
    </div>
</div>
<%-- 数据表格 --%>
<div class="form-group">
    <table class="table table-bordered table-striped text-center table-hover">
        <tr class="info">
            <td>员工编号</td>
            <td>员工姓名</td>
            <td>员工年龄</td>
            <td>员工手机号</td>
            <td>员工身份证</td>
            <td>员工地址</td>
            <td>状态</td>
            <td>角色</td>
            <td>备注</td>
            <td>创建时间</td>
            <td>操作</td>
        </tr>
        <tbody id="tb"></tbody>
    </table>
</div>
<%--下边的文字下拉菜单还有按钮 --%>
<div class="form-inline">
    <label>显示第 <span id="rowstart"></span> 到第 <span id="rowend"></span> 条记录,总共<span id="rowCount"></span>条记录 每页显示
        <select class="form-control" id="pageSize">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        条记录</label>
    <label class="pull-right">
        <a href="javascript:search(pageBean.pageNo-1)" class="btn btn-default"><</a>
        <div id="btns" class="form-group"></div>
        <a href="javascript:search(pageBean.pageNo+1)" class="btn btn-default">></a>
    </label>
</div>
<%-- 新增模态框（Modal）--%>
<div class="modal fade" id="xinzeng">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">新增员工信息</h4>
            </div>
            <div class="modal-body">
                <form id="xzfrom" method="post">
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工编号</div>
                                <input type="text" class="form-control" name="staffId" id="xzstaffId" placeholder="员工编号"
                                       disabled="disabled"/>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工姓名</div>
                                <input type="text" class="form-control" name="staffName" placeholder="员工姓名"/>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-12">
                                <div class="input-group-addon">员工手机号</div>
                                <input type="text" class="form-control" name="phone" placeholder="员工手机号"/>
                                <span style="color: red;display: none;">手机号不正确</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工身份证</div>
                                <input type="text" class="form-control" name="idCard" placeholder="员工身份证"/>
                                <span style="color: red;display: none;">身份证号不正确</span>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工状态</div>
                                <select class="form-control" name="status">
                                    <option value="1">在职</option>
                                    <option value="2">离职</option>
                                    <option value="3">黑名单</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-12">
                                <div class="input-group-addon">员工角色</div>
                                <select class="form-control roles" name="roleId"></select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <div class="input-group-addon">备注</div>
                                <input type="text" class="form-control" name="momo" placeholder="备注"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <div class="input-group-addon">员工地址</div>
                                <input type="text" class="form-control" name="address" placeholder="员工地址"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="xzqueren">确认</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<%-- 修改模态框（Modal） --%>
<div class="modal fade" id="xiugai">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改员工信息</h4>
            </div>
            <div class="modal-body">
                <form id="xgform" method="post">
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工编号</div>
                                <input type="text" class="form-control" name="staffId" placeholder="员工编号"
                                       disabled="disabled"/>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工姓名</div>
                                <input type="text" class="form-control" name="staffName" placeholder="员工姓名"/>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-12">
                                <div class="input-group-addon">员工手机号</div>
                                <input type="text" class="form-control" name="phone" placeholder="员工手机号"/>
                                <span style="color: red;display: none;">手机号不正确</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工身份证</div>
                                <input type="text" class="form-control" name="idCard" placeholder="员工身份证"/>
                                <span style="color: red;display: none;">身份证号不正确</span>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-11">
                                <div class="input-group-addon">员工状态</div>
                                <select class="form-control" name="status">
                                    <option value="1">在职</option>
                                    <option value="2">离职</option>
                                    <option value="3">黑名单</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <div class="input-group col-sm-12">
                                <div class="input-group-addon">员工角色</div>
                                <select class="form-control roles" name="roleId">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <div class="input-group-addon">备注</div>
                                <input type="text" class="form-control" name="momo" placeholder="备注"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <div class="input-group-addon">员工地址</div>
                                <input type="text" class="form-control" name="address" placeholder="员工地址"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" onclick="xgqueren()">确认</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<%-- 按钮事件 --%>
<script type="text/javascript">
    let pageBean = new Object();
    pageBean.pageNo = 1;
    pageBean.pageSize = 5;
    pageBean.factor = [];
    $(function () {
        //开始的时候查询
        search(1);
        //点击搜索按钮查询
        $('#shoubtn').click(function () {
            search(1);
        });
        $('#xinzeng').on('hide.bs.modal',function () {
            $(this).clea();
        });
        $('#xinzeng').on('show.bs.modal',function () {
            $.ajax({
                url:"/staffController/findinfo",
                type:"post",
                success:function (data) {
                    $('#xzstaffId').val(data);
                },
                dataType: "json"
            })
        });
        $('#xiugai').on('hide.bs.modal',function () {
            $(this).clea();
        });
        //新增员工确认按钮事件
        $('#xzqueren').click(function () {
            let flag = false;
            let phonepd = /^\d{11}$/;
            let idCardPd = /^\d{17}(x|X|\d)$/;
            //验证
            if ($('#xzfrom [name="staffName"]').val() != "" &&
                phonepd.test($('#xzfrom [name="phone"]').val()) &&
                idCardPd.test($('#xzfrom [name="idCard"]').val())) {
                flag = true;
            }
            if (flag==true) {
                $.post(
                    "${pageContext.request.contextPath}/staffController/add",
                    $('#xzfrom').parseForm(),
                    function (date) {
                        show();
                        $('#xinzeng').modal('hide');
                        if (date > 0) {
                            toastr.success("添加成功");
                        } else {
                            toastr.error("添加失败");
                        }
                    },
                    "json"
                );
            }else{
                toastr.info("请填写完整的员工信息");
            }
        });
        //行数进行改变事件
        $('#pageSize').on('change', function () {
            pageBean.pageSize = parseInt($('#pageSize').val());
            search(1);
        });
    });

    function search(num) {
        //判断上一页有没有
        if (num > 0) {
            pageBean.pageNo = num;
        } else {
            pageBean.pageNo = 1;
            num = 1;
        }
        //判断下一页有没有
        if (num <= pageBean.totalPage) {
            pageBean.pageNo = num;
        } else {
            if(pageBean.totalPage!=0){
                pageBean.pageNo = pageBean.totalPage;
            }else{
                pageBean.pageNo = 1;
            }
        }
        //判断员工编号填写没有
        if ($('#staffId').val() != "") {
            if($('#staffId').val().indexOf("'")>=0) {
                pageBean.factor.push(" 1=0 ");
            }else{
                pageBean.factor.push(" staffId like '%" + $('#staffId').val() + "%' ");
            }
        }
        //判断员工姓名填写没有
        if ($('#staffName').val() != "") {
            if($('#staffName').val().indexOf("'")>=0) {
                pageBean.factor.push(" 1=0 ");
            }else{
                pageBean.factor.push(" staffName like '%" + $('#staffName').val() + "%' ");
            }
        }
        pageBean.data = "";
        show();

    }

    //界面开始时候的显示数据
    function show() {
        $.post(
            "${pageContext.request.contextPath}/staffController/show",
            pageBean,
            function (date) {
                pageBean = date["staffs"];
                pageBean.factor = [];
                $('#rowCount').html(pageBean.rowCount);
                $('#rowstart').html(pageBean.rowCount==0?0:pageBean.startIndex + 1);
                let con = pageBean.rowCount==0?0:
                    pageBean.pageNo == pageBean.totalPage ?
                        pageBean.rowCount % pageBean.pageSize == 0 ?
                            pageBean.pageSize:pageBean.rowCount % pageBean.pageSize
                    :pageBean.pageSize;
                $('#rowend').html(pageBean.startIndex + con);
                let btns = "";
                for (let i = 0; i < pageBean.totalPage; i++) {
                    if(pageBean.pageNo==i+1){
                        btns += "<a href='javascript:search(" + (i + 1) + ");' class='btn btn-primary'>" + (i + 1) + "</a>";
                    }else {
                        btns += "<a href='javascript:search(" + (i + 1) + ");' class='btn btn-default'>" + (i + 1) + "</a>";
                    }
                }
                $('#btns').html(btns);
                let select = "";
                //下拉菜单显示
                for (let l = 0; l < date["roles"].length; l++) {
                    select += "<option value='" + date["roles"][l]["id"] + "'>" + date["roles"][l]["roleName"] + "</option>"
                }
                $('.roles').each(function () {
                    $(this).html(select);
                });
                //表格显示
                let tr = "";
                if (pageBean.data != null) {
                    for (let i = 0; i < pageBean.data.length; i++) {
                        let rolename = "";
                        let status = "";
                        switch (pageBean.data[i]["status"]) {
                            case 1:
                                status = "在职";
                                break;
                            case 2:
                                status = "离职";
                                break;
                            case 3:
                                status = "黑名单";
                                break;
                        }
                        for (let j = 0; j < date["roles"].length; j++) {
                            if (pageBean.data[i]["roleId"] == date["roles"][j]["id"]) {
                                rolename = date["roles"][j]["roleName"];
                            }
                        }
                        let strBirthday = pageBean.data[i]["idCard"].substr(6, 4) + "/" + pageBean.data[i]["idCard"].substr(10, 2) + "/" + pageBean.data[i]["idCard"].substr(12, 2);
                        let birthDate = new Date(strBirthday);
                        let nowDateTime = new Date();
                        let age = nowDateTime.getFullYear() - birthDate.getFullYear();
                        let momo="";
                        if(pageBean.data[i]["momo"]!=null){
                            momo=pageBean.data[i]["momo"];
                        }
                        let address="";
                        if(pageBean.data[i]["address"]!=null){
                            address=pageBean.data[i]["address"];
                        }
                        tr += "<tr>" +
                            "<td>" + pageBean.data[i]["staffId"] + "</td>" +
                            "<td>" + pageBean.data[i]["staffName"] + "</td>" +
                            "<td> " + age + "</td>" +
                            "<td>" + pageBean.data[i]["phone"] + "</td>" +
                            "<td>" + pageBean.data[i]["idCard"] + "</td>" +
                            "<td>" + address + "</td>" +
                            "<td>" + status + "</td>" +
                            "<td>" + rolename + "</td>" +
                            "<td>" + momo + "</td>" +
                            "<td>" + pageBean.data[i]["createdTime"] + "</td>" +
                            "<td><input type='button' class='btn btn-sm btn-info' onclick='updateTr()'  value='修改'/>" +
                            "</td>" +
                            "</tr>"
                    }
                }
                $('#tb').html(tr);
            },
            "json"
        );
    }

    //删除员工按钮事件
    function deteleTr() {
        let id = event.target.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML;
        let b = confirm("确定删除这个员工");
        if (b) {
            $.get(
                "${pageContext.request.contextPath}/staffController/delete",
                {id: id},
                function (pd) {
                    show();
                    if (pd > 0) {
                        toastr.success("删除成功");
                    } else {
                        toastr.error("删除失败");
                    }
                }
            );
        }
    }

    //修改员工按钮事件
    function updateTr() {
        let staffid = event.target.parentNode.parentNode.firstElementChild.innerHTML;
        $.ajax({
            url: "${pageContext.request.contextPath}/staffController/selectId",
            data: {staffid: staffid},
            success: function (data) {
                $('#xiugai').modal('show');
                let inps = $('#xiugai .form-control');
                inps[0].value = data["staffId"];
                inps[1].value = data["staffName"];
                inps[2].value = data["phone"];
                inps[3].value = data["idCard"];
                inps[4].value = data["status"];
                inps[5].value = data["roleId"];
                inps[6].value = data["momo"]==null?"":data["momo"];
                inps[7].value = data["address"]==null?"":data["address"];
            },
            dataType: "json"
        });
    }

    //修改员工模态框按钮确认shijian
    function xgqueren() {
        let flag = false;
        let phonepd = /^\d{11}$/;
        let idCardpd = /^\d{17}(x|X|\d)$/;
        //员工名字验证
        if ($('#xgform [name="staffName"]').val() != "" &&
            phonepd.test($('#xgform [name="phone"]').val()) &&
            idCardpd.test($('#xgform [name="idCard"]').val())) {
            flag = true;
        }
        if (flag == true) {
            $.post(
                "${pageContext.request.contextPath}/staffController/update",
                $('#xgform').parseForm(),
                function (data) {
                    show();
                    if (data == 1) {
                        toastr.success("修改成功");
                    } else {
                        toastr.error("修改失败");
                    }
                },
                "json"
            );
            $('#xiugai').modal('hide');
        } else {
            toastr.info("请填写完整的员工信息");
        }
    }
</script>
<%-- 表单验证 --%>
<script type="text/javascript">
    $(function () {
        //员工名字验证
        $('[name="staffName"]').each(function () {
            $(this).on('input porpertychange', function () {
                if ($(this).val() == "") {
                    this.parentNode.className = 'input-group col-sm-12 has-error';
                    this.parentNode.getElementsByClassName('glyphicon')[0].className = 'glyphicon form-control-feedback glyphicon-remove';
                } else {
                    this.parentNode.className = 'input-group col-sm-12 has-success';
                    this.parentNode.getElementsByClassName('glyphicon')[0].className = 'glyphicon form-control-feedback glyphicon-ok';
                }
            })
        });
        //员工手机号验证
        $('[name="phone"]').each(function () {
            $(this).on('change', function () {
                let phonepd = /^\d{11}$/;
                if (phonepd.test(this.value)) {
                    this.parentNode.lastElementChild.style.display = "none";
                } else {
                    this.parentNode.lastElementChild.style.display = "block";
                }

            });
        });
        //身份证号验证
        $('[name="idCard"]').each(function () {
            $(this).on('change', function () {
                let idCardPd = /^\d{17}(x|X|\d)$/;
                if (idCardPd.test(this.value)) {
                    this.parentNode.lastElementChild.style.display = "none";
                } else {
                    this.parentNode.lastElementChild.style.display = "block";
                }
            });
        });
    })
</script>
</body>
</html>
